<template>
    <div>
       <div>
            <div  style="margin-top: 5px;background-color: #16161A;padding-bottom: 10px;">
            
              <div>
                  <van-grid :border="false" :column-num="3" class="film_imgs" >
                      <van-grid-item v-for="(film,index) in allfilms" :key="index" class="van-grid-item__content">
                        <router-link :to="'/showFilms/' + film.id">
                          <van-image :src="film.image_url" />
                          <div> {{film.title}} </div>
                        </router-link>
                      </van-grid-item>
                    </van-grid>
              </div>
              
              <div >
                <button class="btn_more" @click="loadMore">加载更多</button>
              </div>

            </div>

       </div>
  
    </div>
  </template>
  
  <script>
  export default {
    name: 'AllFilms',
    data () {
     return {
      allfilms:[],
      getsize: 18,
     }
    },
    mounted() {
      this.initFilms();
    },
    methods:{
      //加载电影
    loadMore() {
      // 点击按钮，加载更多的电影
      // 当触发这个加载更多方法的时候，应该让 page 页码 + 1 之后，再调用 initFilms 方法
      this.getsize += 18;
      this.initFilms();
      Toast.success('加载成功！');
     
    },
      initFilms(){
        const _this = this
        this.axios.get("/reqq/type/findById?typeId=5&page=0&size="+ this.getsize).then(resp=>{
            console.log(resp)
            _this.allfilms = resp.data.data.result
        })
      }
    }
  }
  </script>
  
  <style scoped>
   
    /* 字体 */
    .film_imgs .van-grid-item div{
      font-size: 12px;
      text-align: center;
      color: #F6F1E0;
      height: 25px;
    }
    /* 图片 */
       .film_imgs .van-grid-item .van-image{
        width: 94%;
        height: 160px;
          
      }
        /* 卡片 */
     /deep/ .van-image__img  {
         border-radius: 5px;
      }
      /* 卡片背景 */
      /deep/ .van-grid-item__content {    
        /* background-color: #eee; */
        background-color: #16161A;
        padding: 3px 1px;
      }
  
  </style>